<template>
    <div>
        <div class="sy-tit">订单全寿命周期实时利率分布</div>
        <div style="width:1550px;height:400px; ">
            <div id="myChart" style="width:1570px;height:450px;"></div>
        </div>
    </div>
</template>

<script>
import { arr1, arr2, arr3, arr4, arr5, arr6, arr7 } from './arr'
import Bus from '../components/bus.js'
export default {
    data() {
        return {
            index: 0,
            setArr: [
                ['0.99', '9.00'],
                ['4.93', '8.13'],
                ['10.14', '7.70'],
                ['14.98', '6.78'],
                ['20.11', '6.24'],
                ['25.28', '4.54'],
                ['30', '7.3'],
            ],
        }
    },
    mounted() {
        const { index, setArr } = this
        this.InitChart(setArr[index])
        // setTimeout(() => {
        //     this.InitChart(setArr)
        // }, 1000)
    },
    methods: {
        InitChart(num) {
            var arr = [...arr1, ...arr2]
            var tuarr2 = [...arr3, ...arr4, ...arr5, ...arr6, ...arr7]
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 指定图表的配置项和数据
            var option = {
                // type: 'pie',
                // silent: true,
                color: ['#caf982', '#8080ff', '#ed818e'],
                tooltip: {
                    // trigger: 'axis',
                    axisPointer: {
                        // type: 'cross',
                        // crossStyle: {
                        //     color: '#999',
                        // },
                    },
                    formatter: function (params) {
                        // console.log(params)
                        // var relVal = params[0].name
                        // for (var i = 0, l = params.length; i < l; i++) {
                        //     if (params[i].seriesName === '单个供应商') {
                        //         relVal += '<br/>' + params[i].seriesName + '(个)' + ' : ' + params[i].value[0]
                        //     }
                        //     if (params[i].seriesName === '单笔订单') {
                        //         relVal += '<br/>' + params[i].seriesName + '(个)' + ' : ' + params[i].value[0]
                        //     }
                        //     if (params[i].seriesName === '实时平均价') {
                        //         relVal += '<br/>' + params[i].seriesName + '(万)' + ' : ' + params[i].value[0]
                        //     }
                        // }
                        // return relVal
                    },
                },
                legend: {
                    data: ['单个供应商', '单笔订单', '实时平均价'],
                    orient: 'horizontal',
                    x: '550px',
                    y: 'center',
                    top: 0,
                },
                grid: {
                    right: 5,
                    left: -3,
                    top: 35,
                    containLabel: true,
                },

                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: [
                            '招投标',
                            '合同签订',
                            '采购定单',
                            '物资生产',
                            '物资配送',
                            '工程投运验收',
                            '工程质保',
                            '',
                        ],
                        lineStyle: {},
                        // offset: -145,
                    },
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 35,
                        interval: 5,
                        axisLabel: {
                            // formatter: '{value} %',
                        },
                        show: true,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                        },
                        // 竖线
                        splitLine: {
                            show: true,
                        },
                        scale: true,
                        splitNumber: 1,
                        axisLabel: {
                            show: false,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 15,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %',
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        type: 'effectScatter',
                        symbolSize: 8,
                        data: [['0.99', '9.00']],
                        color: '#FF2D2D',
                        zlevel: '5',
                        name: 'yuan',
                        xAxisIndex: 1,
                    },
                    {
                        name: '单个供应商',
                        type: 'scatter',
                        data: arr,
                        color: '#caf982',
                        symbolSize: 9,
                        xAxisIndex: 1,
                    },
                    {
                        name: '单笔订单',
                        type: 'scatter',
                        // emphasis: {
                        //     focus: 'series',
                        // },
                        data: tuarr2,
                        color: '#8080ff',
                        symbolSize: 9,
                        xAxisIndex: 1,
                    },
                    {
                        name: '实时平均价',
                        quadraticOut: function () {},
                        // emphasis: {
                        //     focus: 'series',
                        // },
                        type: 'line',
                        //  smooth: true,
                        xAxisIndex: 0,
                        data: this.setArr,
                        color: '#ed818e',
                        xAxisIndex: 1,
                        symbol: 'none',
                        zlevel: '0',
                        // areaStyle: {
                        //     color: {
                        //         type: 'linear',
                        //     },
                        // },
                    },
                ],
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart.on('click', function (e) {
                console.log('444', e)
                Bus.$emit('getTarget', e.value)
            })
            let setArr = [
                ['0.99', '9.00'],
                ['4.93', '8.13'],
                ['10.14', '7.70'],
                ['14.98', '6.78'],
                ['20.11', '6.24'],
                ['25.28', '4.54'],
                ['30', '7.3'],
            ]
            let setNum = 0
            if (setNum < 6) {
                setInterval(() => {
                    myChart.setOption({
                        series: {
                            type: 'effectScatter',
                            symbolSize: 8,
                            data: [setArr[setNum]],
                            xAxisIndex: 1,
                        },
                    })
                    setNum = setNum + 1
                }, 2000)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.sy-tit {
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #666666;
    margin-top: 20px;
}
</style>